<template>
  <div class="wrapPage">
    库区扫描导入
    <div class="contentBox">
      <div class="imgfile" v-viewer>
        <div class="imgBox">
          <img src="@/assets/img/demo.png" alt />
        </div>
        <span class="delBox" @click="delClick">删除</span>
      </div>
      <div class="imgBox" @click="addOrUpdateHandle">
        <img src="@/assets/img/scan.png" alt />
        <span class="texts">请拍摄照片</span>
      </div>
    </div>
    <div class="opert">
      <el-button type="primary">提交</el-button>
    </div>
    <TakePhoto v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
  </div>
</template>
<script>
import TakePhoto from "./takePhoto";
export default {
  components: { TakePhoto },
  data() {
    return {
      addOrUpdateVisible: false
    };
  },
  computed: {},
  methods: {
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    getDataList() {},
    delClick() {
      this.$confirm(`确定对[]进行[删除}]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    }
  },
  mounted() {
    // this.getCompetence();
  },
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>
.wrapPage {
  padding-top: 30px;
}
.opert {
  padding-top: 30px;
  text-align: center;
}
.contentBox {
  padding-top: 30px;
  justify-content: center;
  display: flex;
  padding-left: 30px;
  padding-right: 30px;
  flex-wrap: wrap;
}
.imgBox {
 width: 180px;
  height: 220px;
  background-color: #f0f2f5;
  border: 1px solid #d6d6d6;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  flex-direction: column;
  .texts{
    margin-top: 20px;
  }
}
.imgfile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20px;

  img {
    width: 100%;
  }
  .delBox {
    padding: 5px 20px;
    border: 1px solid #d6d6d6;
    border-radius: 20px;
    margin-top: 10px;
    cursor: pointer;
    &:hover {
      background-color: #3e8ef7;
      color: #fff;
    }
  }
}
</style>